<template>
  <div>
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="query.keyword" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="initPageData">查询</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="batchDelete"  size="medium">批量删除</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="showModal"  size="medium">新增</el-button>
      </el-form-item>
    </el-form>
  <el-table
    :data="kq.data"
    border
    style="width: 100%"
    stripe
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="店铺">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="电话">
    </el-table-column>
    <el-table-column
        prop="registerTime"
        label="店铺申请时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
    <el-table-column
      prop="logo"
      label="logo">
    </el-table-column>
    <el-table-column
      prop="employee.username"
      label="店长">
    </el-table-column>
    <el-table-column
      label="状态" >
      <template slot-scope="scope">
      <span v-if="scope.row.state==1" style="color: blue">待审核</span>
      <span v-if="scope.row.state==2" style="color: yellow">待激活</span>
      <span v-if="scope.row.state==3" style="color: lime">审核通过</span>
      <span v-if="scope.row.state==4" style="color: red">驳回</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="300">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleAudit(scope.$index, scope.row)">审核</el-button>
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="currentChangeFunc"
    :current-page="query.currentPage"
    :page-size="query.pageNumber"
    :page-sizes="[10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    :total=kq.total>
  </el-pagination>
    <el-dialog title="审核" :visible.sync="auditFormVisible" v-loading="loading">
      <el-form :model="audit">
        <el-form-item label="审核" label-width="200">
          <el-radio-group v-model="audit.state">
            <el-radio class="radio" :label="3">审核通过</el-radio>
            <el-radio class="radio" :label="4">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="驳回原因" label-width="200">
          <el-input type="textarea" v-model="audit.note" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditMessage">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增/修改的弹出框   :visible.sync 用来控制弹出框是关闭还是打开的  true 打开  false 关闭 -->
    <el-dialog title="新增/修改" :visible.sync="dialogFormVisible" v-loading="loading">
      <el-form :model="shop">
        <el-form-item label="店铺" label-width="200">
          <el-input v-model="shop.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="200">
          <el-input v-model="shop.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="200">
          <el-input v-model="shop.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="logo" label-width="200">
        <el-input v-model="shop.logo" autocomplete="off"></el-input>
      </el-form-item>

        <el-form-item label="店长" label-width="200">
<!--          <el-input v-model="shop.head" autocomplete="off"></el-input>-->
          <el-select v-model="shop.employee" clearable value-key="id" placeholder="请选择">
            <!--下拉选项
              :key=""  //唯一标识
              :label 选择之后展示到选择框中的值
              :value 选中之后绑定给模型层的值  如果要绑定对象给模型层 有一个大坑
                 必须要写  value-key="id"
            -->
            <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.username"
                :value="item">
              <span style="float: left">{{ item.username }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" label-width="200">
          <el-radio-group v-model="shop.state">
            <el-radio class="radio" :label="1">待审核</el-radio>
            <el-radio class="radio" :label="2">待激活</el-radio>
            <el-radio class="radio" :label="3">审核通过</el-radio>
            <el-radio class="radio" :label="4">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shop:{
        id:null,
        name:"",
        tel:"",
        registerTime:"",
        state:null,
        address:"",
        logo:"",
        employee:{
          id:null,
          username:""
        }
      },
      audit:{
        id:null,
        state:null,
        note:""
      },
      kq: {
        data:null,
        total:null
      },
      heart:[],
      employees:[],
      query:{
        currentPage:1,
        pageNumber:10,
        keyword:"",
      },
      dialogFormVisible:false,
      loading:false,

      auditFormVisible:false
    }
  },
  methods:{

    handleAudit(index, row){
      this.auditFormVisible=true;
      this.audit.id= row.id;
    },


    handleSelectionChange(rows){  //获取批量删除的多有id
      this.heart=rows;
      console.log(this.heart)
    },

    handleEdit(index, row) {
      this.dialogFormVisible=true;
      this.shop= Object.assign({}, row);
      this.getHead();
    },
    //保存
    save(){
      this.loading = true;  // 弹出加载框
      // 1 判断字段的非空校验
      // 2 发起请求保存数据
      let param = Object.assign({}, this.shop);
      this.$http.put("/shop",param)
        .then(result => {
          this.loading = false;
          result = result.data;
          if(result.success){
            this.showMessage(1,"保存成功!");
            this.query.currentPage = 1;
            this.initPageData();
            this.dialogFormVisible = false; // 关闭模态框
          }else{
            this.showMessage(2,"保存失败")
          }
        })
    },
    auditMessage(){
      this.loading = true;  // 弹出加载框
      console.log(this.audit)
      let param = Object.assign({}, this.audit);
      this.$http.put("/shop/audit",param)
          .then(result => {
            this.loading = false;
            result = result.data;
            if(result.success){
              this.showMessage(1,"保存成功!");
              this.query.currentPage = 1;
              this.initPageData();
              this.auditFormVisible = false; // 关闭模态框
            }else{
              this.showMessage(2,"保存失败")
            }
          })
    },

    //获取部门领导
    getHead(){
      this.$http.get("/employee")
                .then(result=>{
                  var data = result.data;
                  this.employees=data.object;
                  if (data.success){
                    // this.showMessage(1,"获取部门领导成功！")
                  }else {
                    this.showMessage(2,"获取部门领导失败！")
                  }
                })
                .catch(result=>{
                this.showMessage(2,"获取部门领导失败！")
      })
    },

    //新增
    showModal(){
      // 新增前先清空上次的操作数据
      this.shop={
        id:null,
        name:"",
        tel:"",
        registerTime:"",
        state:null,
        address:"",
        logo:"",
        employee:{
          id:null,
          username:""
        }
      }
      //弹出模态框
      this.dialogFormVisible=true;
      this.getHead();
      this.getShopTree();
    },

    //批量删除
    batchDelete(){
      //获取批量删除的所有id
      let ids = this.heart.map(map=>map.id);
      //先判断用户是否勾选了
      if (ids.length<1){
        //小于1就提示用户
        this.showMessage(2,"未选择！");
        return;
      }
      //提示用户是否要删除
      this.$confirm('此操作将永久删除数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 如果用户选择确定,就会走then这个方法
        // 4 如果选择确定,就发起删除请求
        console.log(ids)
        this.$http.patch("/shop",ids)
          .then(result=>{
            let data=result.data;
            if (data.success){
              this.showMessage(1,"删除成功");
              //删除后刷新数据
              this.query.currentPage=1;
              this.initPageData();
            }
          })
      }).catch(()=>{  //取消就进入这个方法
        this.showMessage(3,"取消成功")
      })
    },

    //删除
    handleDelete(index, row) {
      //获取id
      let id=row.id;
      //提示用户是否删除
      this.$confirm('此操作将永久删除数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 如果用户选择确定,就会走then这个方法
        // 4 如果选择确定,就发起删除请求
        this.$http.delete("/shop/"+id)
                  .then(result=>{
                    let data=result.data;
                    if (data.success){
                      this.showMessage(1,"删除成功");
                      //删除后刷新数据
                      this.query.currentPage=1;
                      this.initPageData();
                    }
                  })
      }).catch(()=>{  //取消就进入这个方法
          this.showMessage(3,"取消成功")
      })
    },
    showMessage(type,message){
      if(type == 1){
        this.$message({
          type: 'success',
          message: message
        });
      }else if(type == 2){
        this.$message({
          type: 'error',
          message: message
        });
      }else if(type == 3){
        this.$message({
          type: 'info',
          message: message
        });
      }
    },
    currentChangeFunc(val){
      this.query.currentPage=val;
      this.initPageData();
    },
    handleSizeChange(val){
      this.query.pageNumber=val;
      this.query.currentPage = 1;
      this.initPageData();
    },
    initPageData(){
      this.$http.post("/shop",this.query)
        .then(result=>{
          let pageData = result.data;
         this.kq=pageData.object;
        }).catch(result=>{
          alert(result.message)
      })
    }
  },
  mounted() {
    this.initPageData()
  }
}
</script>
